<template>
  <div style="position: relative; width: 100vw; height: 550px; top: 60px" v-if="!resShow">
    <el-card class="card">
      <template #header>
        <div class="card-header">
          <el-page-header @back="goBack" style="color: #ecf5ff">
            <template #content><span class="text-large font-600 mr-3" style="color: #ecf5ff">
                建设单位注册
              </span></template>
          </el-page-header>
          <el-button style="color: #18585" type="success" text @click.prevent="clearUp">清空</el-button>
        </div>
      </template>

      <el-form ref="constructorFormRef" v-loding="loding" :model="constructorForm" :rules="rules" label-width="120px"
        class="demo-ruleForm" status-icon>
        <!-- 数据部分 -->
        <!-- <div class="div_row"> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="建设单位名称" prop="name">
              <el-input v-model="constructorForm.name" placeholder="请输入建设单位名称、个人姓名" class="input300" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建设信用代码" prop="code">
              <el-input v-model="constructorForm.code" placeholder="请输入建设信用代码、身份证号码" class="input300" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="法人姓名" prop="legalman">
              <el-input v-model="constructorForm.legalman" placeholder="请输入法人姓名" class="input300" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证号码" prop="legalCardno">
              <el-input v-model="constructorForm.legalCardno" placeholder="请输入法人身份证号码" class="input300" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="法人手机号码" prop="legalMobile">
              <el-input v-model="constructorForm.legalMobile" placeholder="请输入法人手机号码" class="input300" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属地区" prop="areaCode">
              <el-cascader v-model="constructorForm.areaCode" placeholder="请选择归属地区" :options="areaoptions"
                 @change="handleCascaderChange" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row> -->
        <el-col :span="22">
          <el-form-item label="注册地址" prop="regAddr">
            <el-input v-model="constructorForm.regAddr" placeholder="请输入注册地址" />
          </el-form-item>
        </el-col>
        <!-- </el-row> -->
        <!-- <el-row> -->
        <el-col :span="22">
          <el-form-item label="办公地址" prop="officeAddr">
            <el-input v-model="constructorForm.officeAddr" placeholder="请输入办公地址" />
          </el-form-item>
        </el-col>
        <!-- </el-row> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="建设单位类型">
              <el-select v-model="constructorForm.type" placeholder="请选择建设单位类型" class="input300" clearable>
                <el-option v-for="item in constructorType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="">
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录密码" prop="password">
              <el-input v-model="constructorForm.password" type="password" placeholder="请输入登录密码" class="input300" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="constructorForm.confirmPassword" type="password" placeholder="请输入确认密码"
                class="input300" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24" style="display: flex; align-item: center; justify-content: center">
          <el-button type="primary" @click.prevent="submit" :loading="loading" style="width: 200px; margin-top: 30px">
            注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册
          </el-button>
          <!-- <el-button @click.prevent="resetFields">清空</el-button> -->
        </el-col>
        <!-- </div> -->
      </el-form>
    </el-card>
  </div>
  <resComponent v-else style="margin-top: 200px"></resComponent>
</template>

<script lang="ts" setup>
import { constructorReg, constructorExists } from "@/api/account/constructor/index";
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ConstructorForm } from "@/api/account/constructor/types";
import { getDicts } from "@/store/modules/dict";
import { useRouter } from "vue-router";
import resComponent from '@/views/account/register/resComponent/index.vue'
const router = useRouter();
const loading = ref(false);
const resShow = ref(false);

const constructorForm = reactive<ConstructorForm>({
  type: 10,
  confirmPassword: "",
  password: ""
});
const constructorFormRef = ref(ElForm); // 表单/清空重置使用
//城市联动赋值
const handleCascaderChange = (value: any) => {
  if (value.length == 3) {
    constructorForm.provinceCode = value[0];
    constructorForm.cityCode = value[1];
    constructorForm.areaCode = value[2];
  }
  // 在这里可以对选中的值进行进一步处理
};
//枚举
const constructorType = getDicts("constructorTypes");
const areaoptions = getDicts("areaTrees");

const rules = reactive<FormRules<ConstructorForm>>({
  name: [{ required: true, message: "建设单位名称不能为空", trigger: "blur" }],
  code: [{ required: true, trigger: "blur", validator: codeBlur }],
  password: [{ required: true, message: "登录密码不能为空", trigger: "blur" }],
  // provinceCode: [{ required: true, message: "归属省不能为空", trigger: "blur" }],
  cityCode: [{ required: true, message: "归属地市不能为空", trigger: "blur" }],
  // areaCode: [{ required: true, message: "归属区县不能为空", trigger: "blur" }],
  regAddr: [{ required: true, message: "注册地址不能为空", trigger: "blur" }],
	officeAddr: [{ required: true, message: "办公地址不能为空", trigger: "blur" }],
  legalman: [{ required: true, message: "法人姓名不能为空", trigger: "blur" }],
  legalCardno: [
    { required: true, message: "法人身份证号码不能为空", trigger: "blur" },
    {
      pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      message: "请输入正确的身份证号码",
      trigger: "blur",
    },
  ],
  legalMobile: [
    { required: true, message: "法人手机号码不能为空", trigger: "blur" },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  confirmPassword: [
    { required: true, trigger: "blur", validator: passwordBlur },
  ],
});

//返回上一页
const goBack = () => {
  router.go(-1);
};

function clearUp() {
  ElMessage.success("清空成功");
  constructorFormRef.value.resetFields();
  constructorFormRef.value.clearValidate();
}

function passwordBlur(rule: any, value: any, callback: any) {
  if (value === undefined || value === "") {
    callback(new Error("确认密码不能为空"));
  } else {
    if (value != constructorForm.password) {
      callback(new Error("两次密码不一致"));
    } else {
      callback();
    }
  }
}
function codeBlur(rule: any, value: any, callback: any) {
  if (!value || value === undefined || value === "") {
    callback(new Error("建设信用代码不能为空"));
		return;
  }
  if (value.length < 18) {
    callback(new Error("建设信用代码为18位"));
		return;
  } else {
    constructorExists(value).then((response) => {
      if (response.success === false) {
        callback(new Error(response.msg));
				return;
      } else {
        callback();
      }
    });
  }
}
/**
 * 表单提交
 */
const submit = useThrottleFn(() => {
  constructorFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      constructorReg(constructorForm)
        .then((data) => {
					if(data.success){
						// ElMessage.success("注册成功");
						resShow.value = true;
						constructorFormRef.value.resetFields();
						constructorFormRef.value.clearValidate();
					}else {
						ElMessage({
							type: 'error',
							message: data.msg
						})
					}
        })
        .finally(() => (loading.value = false));
    }
  });
}, 3000);

function resetFields() {
  ElMessage.success("清空成功");
  constructorFormRef.value.resetFields();
  constructorFormRef.value.clearValidate();
}
</script>
<style lang="scss" scoped>
.div_form {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.div_row {
  position: absolute;
  left: 0;
  right: 0;
  // top: 0;
  // bottom: 0;
  // margin: auto;
}

.card {
  width: 50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  background-color: #337ecc;
  align-items: center;
  padding: 10px;
}

:deep() .el-card__header {
  padding: 0px;
}

.demo-ruleForm {
  width: 100%;
  padding-top: 20px;
  position: relative;
}

.div-felx {
  display: flex;
  justify-content: center;
}

.input300 {
  width: 300px !important;
}

.el-select .el-input__inner {
  width: 255px !important;
}

.date-picker {
  width: 302px !important;
}

.el-input__wrapper {
  width: 302px !important;
}

.custom-cascader {
  width: 302px !important;
}
:deep() .el-cascader {
  width: 300px !important;
}
</style>
